import {
  PageContainer,
  ProBreadcrumb,
  ProLayout,
} from '@ant-design/pro-components';
import {
  LogoutOutlined,
} from '@ant-design/icons';
import {
  Button,
  message,
  ConfigProvider,
  Dropdown
} from 'antd';
import { Outlet } from '@umijs/max';
import { useState } from 'react';
import '../global.less';
import { history,useModel } from 'umi';
import services from '@/services/demo';
const { userLogout,getUserInfo } =
  services.UserController;

export default () => {
  const {userInfo,setUserInfo} = useModel('global')// 数据流
  const arr: any[] = [
    {
      name: '公告管理',
      // icon: 'TeamOutlined',
      path: '/announcement',
      component: './announcement',
    },
    {
      name: '平台信息管理',
      // icon: 'TeamOutlined',
      children:[
        {
          name: '评论区管理',
          path: '/readview',
          component: './readview',
        },
        {
          name: '名师管理',
          path: '/teacher',
          component: './teacher',
        },
        {
          name: '订单管理',
          path: '/order',
          component: './order',
        },
        {
          name: '用户管理',
          path: '/user',
          component: './user',
        },
      ],
    },
    {
      name: '系统管理',
      // icon: 'TeamOutlined',
      children:[
        {
          name: '公司信息管理',
          // icon: 'TeamOutlined',
          path: '/system',
          component: './system',
        },
        {
          name: '开关管理',
          path: '/switch',
          component: './switch',
        },
      ],
    },
    {
      name: '兼职管理',
      // icon: 'TeamOutlined',
      path: '/disseminate',
      component: './disseminate',
      children:[
        {
          name: '兼职工作记录',
          // icon: 'TeamOutlined',
          path: '/disseminate',
          component: './disseminate',
        },
      ]
    },
   
  ];
  const arr1: any[] = [
    {
      name: '客户列表',
      // icon: 'TeamOutlined',
      path: '/customer',
      component: './customer',
    },
    {
      name: '记录上传',
      // icon: 'TeamOutlined',
      path: '/uploadRecords',
      component: './uploadRecords',
    },
  ];
  let menu: any[] = []
  if(userInfo.role == 'admin'){
    menu = arr
  }else{
    menu = arr
  }
  console.log(34, userInfo);
  const [pathname, setPathname] = useState(history.location.pathname);
  const outLogin = ()=>{// 退出
    userLogout().then((res:any)=>{
      if(res.code=='200'){
        message.success('退出账号成功');
        localStorage.removeItem('userInfo')
        sessionStorage.removeItem('userInfo')
        history.push('/login')
      }
    })
    
  }
  return (
    <div
      style={{
        height: '100vh',
      }}
    >
    <ConfigProvider theme={{
          token: {
            colorPrimary: '#ffcc00',
            // borderRadius: data.borderRadius,
          },}}>
      <ProLayout
      title='平台'
      logo={null}
      locale={'ko-KR'}
      token={{
        header: {
          colorBgHeader: '#292f33',
          colorHeaderTitle: '#fff',
          colorTextMenu: '#dfdfdf',
          colorTextMenuSecondary: '#dfdfdf',
          colorTextMenuSelected: '#ffcc00',
          colorBgMenuItemSelected: '#fff',
          colorTextRightActionsItem: '#dfdfdf',
        },
        sider: {
          colorMenuBackground: '#ffcc00',
          colorTextMenuTitle: '#fff',
          colorTextMenu: '#fff',
          
          colorTextMenuActive: '#000',
          colorTextMenuItemHover:'#000',
          colorMenuItemDivider: '#dfdfdf',
          colorTextMenuSelected: '#000',
          colorBgMenuItemSelected: '#fff',
        },
        bgLayout:'#fff',
      }}
        location={{
          pathname,
        }}
        ErrorBoundary={false}
        headerContentRender={() => <ProBreadcrumb />}
        breadcrumbRender={(routers = []) => [...routers]}
        menuDataRender={() => [...menu]}
        avatarProps={{
          src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
          size: 'small',
          title: userInfo.username || '管理员',
          render: (props, dom) => {
            return (
              <Dropdown
                menu={{
                  items: [
                    {
                      key: 'logout',
                      icon: <LogoutOutlined />,
                      label: '退出登录',
                      onClick:outLogin
                    },
                  ],
                }}
              >
                {dom}
              </Dropdown>
            );
          },
        }}
        onMenuHeaderClick={(e) => console.log(e)}
        menuItemRender={(item, dom) => (
          <a
            onClick={() => {
              setPathname(item.path || '/');
              history.push(item.path || '/');
            }}
          >
            {dom}
          </a>
        )}
      >
        <PageContainer content="" breadcrumbRender={false}>
          <div>
            <ProBreadcrumb />
            <div>
              <Outlet />
            </div>
          </div>
        </PageContainer>
      </ProLayout>
    </ConfigProvider>
    </div>
  );
};
